<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS 顶部导航样式实例</title>
</head>
<body>
<div class="topnav">
    <a class="active" href="#home">主页</a>
    <a href="#news">新闻</a>
    <a href="#contact">联系方式</a>
    <a href="#about">关于我们</a>
</div>

<div style="padding-left:16px">
    <h2>顶部导航实例</h2>
    <p>信息内容..</p>
</div>
<style>
    body{
        box-sizing: border-box;
        padding: 0;
        margin:0;
    }
    .topnav{

        background-color: black;
        overflow: hidden;
    }
    .topnav a{
        color: white;
        text-align: center;
        text-decoration: none;

        transition: 0.5s;
        font-size: 30px;
        padding: 14px 16px;
    }
    .topnav a:hover{
        background-color: grey;
        color: black;
    }
    .active{
        background-color: green !important;
    }
</style>
</body>
</html>
